<template>
	<el-card>
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane name="first" class="bq">
				<template #label>
					<span style="font-size: 18px">征求意见</span>
				</template>
				<fankui :step="activeName"></fankui>
			</el-tab-pane>
			<el-tab-pane name="second">
				<template #label>
					<span style="font-size: 18px">标准立项批文</span>
				</template>
				<lixiang :step="activeName"></lixiang>
			</el-tab-pane>
			<el-tab-pane name="third">
				<template #label>
					<span style="font-size: 18px">复审结论</span>
				</template>
				<fushen :step="activeName"></fushen>
			</el-tab-pane>
			<el-tab-pane name="fourth">
				<template #label>
					<span style="font-size: 18px">标准批准文件</span>
				</template>
				<pizhun :step="activeName"></pizhun>
			</el-tab-pane>
			<el-tab-pane name="fifth">
				<template #label>
					<span style="font-size: 18px">专家信息</span>
				</template>
				<zhuanjia :step="activeName"></zhuanjia>
			</el-tab-pane>
			<el-tab-pane name="sixth">
				<template #label>
					<span style="font-size: 18px">前瞻性项目立项文件</span>
				</template>
				<qianzhan :step="activeName"></qianzhan>
			</el-tab-pane>
			<el-tab-pane name="seventh">
				<template #label>
					<span style="font-size: 18px">科研成果发布</span>
				</template>
				<keyan :step="activeName"></keyan>
			</el-tab-pane>
			<el-tab-pane name="eighth">
				<template #label>
					<span style="font-size: 18px">标准意见反馈</span>
				</template>
				<yijian :step="activeName"></yijian>
			</el-tab-pane>
		</el-tabs>
	</el-card>
</template>
<script lang="ts" setup>
import type { TabsPaneContext } from 'element-plus'
import { ref } from 'vue'

import fankui from './common/fankui.vue'
import fushen from './common/fushen.vue'
import keyan from './common/keyan.vue'
import lixiang from './common/lixiang.vue'
import pizhun from './common/pizhun.vue'
import qianzhan from './common/qianzhan.vue'
import yijian from './common/yijian.vue'
import zhuanjia from './common/zhuanjia.vue'

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
	console.log(tab, event)
}
</script>
<style>
.demo-tabs > .el-tabs__content {
	padding: 32px;
	color: #6b778c;
	font-size: 32px;
	font-weight: 600;
}
</style>
